<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<template>
  <div class="wxc-demo">
    <scroller class="scroller">
      <title title="wxc-button"></title>
      <category title="五种基本样式"></category>
      <div class="button-list">
        <text class="button-text">taobao</text>
        <wxc-button text="确定"
                    @wxcButtonClicked="wxcButtonClicked"></wxc-button>
        <text class="button-text">fliggy</text>
        <wxc-button text="确定"
                    type="fliggy"
                    @wxcButtonClicked="wxcButtonClicked"></wxc-button>
        <text class="button-text">normal</text>
        <wxc-button text="确定"
                    type="normal"
                    @wxcButtonClicked="wxcButtonClicked"></wxc-button>
        <text class="button-text">highlight</text>
        <wxc-button text="确定"
                    type="highlight"
                    @wxcButtonClicked="wxcButtonClicked"></wxc-button>
        <text class="button-text">disabled</text>
        <wxc-button text="确定"
                    :disabled="true"
                    @wxcButtonClicked="wxcButtonClicked"></wxc-button>
      </div>
      <category title="自定义样式"></category>
      <wxc-cell :has-top-border="false"
                title="按钮的文字">
        <input class="input"
               slot="value"
               placeholder="文字"
               :value="text"
               @input="text=$event.value"></input>
      </wxc-cell>
      <wxc-cell :has-top-border="false"
                title="是否禁用">
        <switch :checked="disabled"
                slot="value"
                @change="disabled= !disabled"></switch>
      </wxc-cell>

      <wxc-cell :has-top-border="false"
                title="按钮宽度">
        <input class="input"
               slot="value"
               placeholder="自定义样式实现, 默认宽度702px"
               :value="width"
               @input="width=$event.value"></input>
      </wxc-cell>
      <wxc-cell :has-top-border="false"
                title="按钮高度">
        <input class="input"
               slot="value"
               placeholder="自定义样式实现, 默认高度88px"
               :value="height"
               @input="height=$event.value"></input>
      </wxc-cell>
      <wxc-cell :has-top-border="false"
                title="背景颜色">
        <input class="input"
               slot="value"
               placeholder="自定义样式实现"
               :value="backgroundColor"
               @input="backgroundColor=$event.value"></input>
      </wxc-cell>
      <wxc-cell :has-top-border="false"
                title="边框颜色">
        <input class="input"
               slot="value"
               placeholder="自定义样式实现"
               :value="borderColor"
               @input="borderColor=$event.value"></input>
      </wxc-cell>
      <wxc-cell :has-top-border="false"
                title="边框圆角">
        <input class="input"
               slot="value"
               placeholder="自定义样式实现,默认12px"
               :value="borderRadius"
               @input="borderRadius=$event.value"></input>
      </wxc-cell>
      <div class="demo">
        <wxc-button :text="text"
                    :type="type"
                    :disabled="disabled"
                    :btn-style="btnStyle"
                    :text-style="textStyle"
                    @wxcButtonClicked="wxcButtonClicked"></wxc-button>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
  .wxc-demo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
  }

  .button-list {
    padding-left: 24px;
  }

  .button-text {
    margin-top: 40px;
    margin-left: 8px;
    margin-bottom: 16px;
  }

  .scroller {
    flex: 1;
  }

  .demo {
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .input {
    width: 500px;
    text-align: right;
    font-size: 28px;
  }
</style>

<script>
  import { WxcButton, WxcCell } from '../../index';
  import Title from '../_mods/title.vue';
  import Category from '../_mods/category.vue';
  import { setTitle } from '../_mods/set-nav';

  const modal = weex.requireModule('modal');
  export default {
    components: { Title, Category, WxcButton, WxcCell },
    data: () => ({
      type: 'taobao',
      text: '按钮文字',
      width: '702px',
      height: '88px',
      disabled: false,
      backgroundColor: '#FF5000',
      borderColor: '#FF5000',
      borderRadius: '12px',
      fontSize: '36px',
      color: '#FFFFFF'
    }),
    computed: {
      btnStyle () {
        const { width, height, backgroundColor, borderColor, borderRadius } = this;
        const customStyle = {};

        if (width) {
          customStyle.width = width;
        }

        if (height) {
          customStyle.height = height;
          customStyle.lineHeight = height;
        }

        if (backgroundColor) {
          customStyle.backgroundColor = backgroundColor;
        }

        if (borderColor) {
          customStyle.borderColor = borderColor;
          customStyle.borderWidth = '1px';
          customStyle.borderStyle = 'solid';
        }

        if (borderRadius) {
          customStyle.borderRadius = borderRadius;
        }
        return customStyle;
      },
      textStyle () {
        const { fontSize, color } = this;
        const customStyle = {};
        if (fontSize) {
          customStyle.fontSize = fontSize;
        }
        if (color) {
          customStyle.color = color;
        }
        return {
          fontSize, color
        }
      }
    },
    created () {
      setTitle('Button');
    },
    methods: {
      wxcButtonClicked (e) {
        const { type, disabled } = e;
        modal.toast({
          message: disabled ? `disabled=${disabled}` : `type=${type}`
        })
      }
    }
  }
</script>
